dateMenu: Align time strings in the World Clocks section

The problem is that " 9:59 AM" (notice the space at the beginning) and
"12:59 AM" strings, when centred, look misaligned —
strings padded with a space look off to the right by nearly
half a character. This happens because the font feature "tnum",
used to make numbers monospace, doesn't work on spaces.

The commit overcomes this by aligning time labels to the end.
However, this won't work for locales with AM/PM strings of different
lengths, so they are aligned to the start instead to minimise offset.

It's too complex to know whether the used locale has different
AM/PM string lengths. Instead, every time the time changes, it
determines whether all the time labels have the same amount of characters.

Fixes #5438

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2294>

diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index bd363f3232d3851d8bb9ce907620d77f66ed974e..f3cb006139e15ee26bec6d06fa92f4cbc2182c42 100644 (file)
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -418,7 +418,10 @@ class WorldClocksSection extends St.Button {
                 x_expand: true,
             });
 
-            let time = new St.Label({ style_class: 'world-clocks-time' });
+            let time = new St.Label({
+                style_class: 'world-clocks-time',
+                x_align: Clutter.ActorAlign.END,
+            });
 
             const tz = new St.Label({
                 style_class: 'world-clocks-timezone',
@@ -484,10 +487,25 @@ class WorldClocksSection extends St.Button {
     }
 
     _updateTimeLabels() {
+        let differentLength = false;
+        let lastLength;
         for (let i = 0; i < this._locations.length; i++) {
             let l = this._locations[i];
             const now = GLib.DateTime.new_now(l.location.get_timezone());
-            l.timeLabel.text = Util.formatTime(now, { timeOnly: true });
+            const text = Util.formatTime(now, { timeOnly: true });
+            l.timeLabel.text = text;
+
+            if (differentLength)
+                continue;
+            if (lastLength === undefined)
+                lastLength = text.length;
+            differentLength = lastLength !== text.length;
+        }
+
+        for (let i = 0; i < this._locations.length; i++) {
+            this._locations[i].timeLabel.x_align = differentLength
+                ? Clutter.ActorAlign.START
+                : Clutter.ActorAlign.END;
         }
     }